<template>
	<view class="container">
		<u-tabs :list="tabList" itemStyle="width: 50%;height: 34px;" lineWidth="30" :current="current"
			@change="changeTab"></u-tabs>

		<view v-if="current == 0">
			<view class="search padding">
				<view>
					<button class="cu-btn round" @click="beginDayShow = true">{{beginDay}}</button>
					-
					<button class="cu-btn round" @click="endDayShow = true">{{endDay}}</button>
					<button style="float: right;" class="cu-btn round" @click="empShow = true">
						{{queryParams.nickName || "全部员工" }}
						<text class="lg text-lg text-blue cuIcon-triangledownfill"></text>
					</button>
					<u-picker :show="empShow" :columns="empList" @confirm="empConfirm" keyName="nickName"
						@cancel="empShow = false"></u-picker>
					<u-datetime-picker :show="beginDayShow" v-model="beginDay" mode="date" @cancel="beginDayCancel"
						@confirm="beginDayConfirm"></u-datetime-picker>
					<u-datetime-picker :show="endDayShow" mode="date" v-model="endDay" @cancel="endDayCancel"
						@confirm="endDayConfirm"></u-datetime-picker>
				</view>
			</view>

			<view v-if="salaryList.length !== 0" v-for="(item,index) in salaryList" @click="toDetail(item)">
				<!-- 虚线勿动 -->
				<view class="conUp" style="margin-top: 20rpx;">
					<view class="splitArea"></view>
				</view>
				<!-- 上层信息框 -->
				<view class="topInfo baseBack" style="margin-top: 0rpx;">
					<view class="" style="margin: 30rpx auto 30rpx 40rpx;">
						<view style="color: #000000;font-size: 45rpx;">{{ item.nickName || ""}}</view>
						<view style="margin-top: 8rpx; color:grey;">{{ item.createTime || ""}}</view>
					</view>
					<button class="cu-btn round bg-purple shadow"
						style="width: 200rpx; margin-right: 50rpx;">{{ item.daySalary | priceFormat }}元</button>
				</view>

				<!-- 虚线勿动 -->
				<view class="conUp">
					<view class="splitArea"></view>
				</view>
			</view>


			<!-- 中层信息框 -->
			<view class="middleInfo baseBack" style="margin-top: 30rpx;" v-if="salaryList.length === 0">
				<u-empty icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
			</view>


		</view>

		<!-- 月工资 -->
		<view v-if="current == 1">
			<view class="search padding">
				<view>
					<button class="cu-btn round" @click="beginMonthShow = true">{{beginMonth || ""}}</button>
					-
					<button class="cu-btn round" @click="endMonthShow = true">{{endMonth || ""}}</button>
					<button style="float: right;" class="cu-btn round" @click="empShow = true">
						{{queryParams.nickName || "全部员工" }}
						<text class="lg text-lg text-blue cuIcon-triangledownfill"></text>
					</button>
					<u-picker :show="empShow" :columns="empList" @confirm="empConfirm" keyName="nickName"
						@cancel="empShow = false"></u-picker>
					<u-datetime-picker :show="beginMonthShow" v-model="beginMonth" mode="year-month"
						@cancel="beginMonthCancel" @confirm="beginMonthConfirm"></u-datetime-picker>
					<u-datetime-picker :show="endMonthShow" mode="year-month" v-model="endMonth"
						@cancel="endMonthCancel" @confirm="endMonthConfirm"></u-datetime-picker>
				</view>
			</view>

			<view v-if="MonSalaryList.length !== 0" v-for="(item,index) in MonSalaryList">
				<!-- 虚线勿动 -->
				<view class="conUp" style="margin-top: 20rpx;">
					<view class="splitArea"></view>
				</view>
				<!-- 上层信息框 -->
				<view class="topInfo baseBack" style="margin-top: 0rpx;">
					<view class="" style="margin: 30rpx auto 30rpx 40rpx;">
						<view style="color: #000000;font-size: 45rpx;">{{item.nickName || ""}}</view>
						<view style="margin-top: 8rpx; color:grey;">{{item.createTime || ""}}</view>
					</view>
					<button class="cu-btn round bg-purple shadow"
						style="width: 200rpx; margin-right: 50rpx;">{{item.num | priceFormat}}元</button>
				</view>

				<!-- 虚线勿动 -->
				<view class="conUp">
					<view class="splitArea"></view>
				</view>
			</view>

			<!-- 中层信息框 -->
			<view class="middleInfo baseBack" style="margin-top: 30rpx;" v-if="MonSalaryList.length === 0">
				<u-empty icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
			</view>
		</view>
		<watermark :text="userName"></watermark>
	</view>
</template>

<script>
	import {
		listRecord,
		selectAllDaySalary,
		selectAllMonSalary
	} from "@/api/record/record.js"
	import {
		getUserList,
		getCusList
	} from "@/api/system/user.js";
	import moment from "moment"
	import watermark from '@/components/warter/watermark.vue'
	export default {
		components: {
			watermark
		},
		data() {
			return {
				userName: this.$store.getters.name,
				tabList: [{
					name: '日工资'
				}, {
					name: '月工资'
				}],
				current: 0,
				beginDayShow: false,
				endDayShow: false,
				beginMonthShow: false,
				endMonthShow: false,
				beginDay: moment().startOf('month').format('yyyy-MM-DD'),
				endDay: moment().format('yyyy-MM-DD'),
				beginMonth: moment().format('yyyy-MM'),
				endMonth: moment().format('yyyy-MM'),
				empShow: false,
				empList: [],
				queryParams: {
					userId: '',
					nickName: '',
					beginDay: '',
					endDay: '',
					beginMonth: '',
					endMonth: '',
					companyId: this.$store.getters.companyId,
				},
				salaryList: [],
				MonSalaryList: []
			}
		},
		onLoad() {
			this.getAllDaySalary()
		},
		mounted() {
			this.getEmpolyees();
		},
		onShow() {},
		onBackPress() {

		},
		onReachBottom() {

		},
		filters: {
			priceFormat(price) {
				if (price == null) {
					return 0
				}
				let realVal = parseFloat(price).toFixed(2)
				return realVal
			}
		},
		methods: {
			toDetail(item) {
				this.$tab.navigateTo(
					"/pagesA/work/salary/detail?item=" + decodeURIComponent(JSON.stringify(item))
				);
			},
			getAllDaySalary() {
				this.queryParams.beginDay = this.beginDay
				this.queryParams.endDay = this.endDay
				selectAllDaySalary(this.queryParams).then(rep => {
					this.salaryList = rep.data
				})
			},
			getAllMonSalary() {
				this.queryParams.beginMonth = this.beginMonth
				this.queryParams.endMonth = this.endMonth
				selectAllMonSalary(this.queryParams).then(rep => {
					this.MonSalaryList = rep.data
				})
			},
			changeTab(tab) {
				this.current = tab.index

				if (this.current == 0) {
					this.getAllDaySalary()
				} else {
					this.getAllMonSalary()
				}
			},
			beginDayCancel() {
				this.beginDayShow = false
			},
			async beginDayConfirm(e) {
				this.beginDay = await moment(e.value).format('yyyy-MM-DD')
				if (this.endDay < this.beginDay) {
					this.$modal.msg("请选择小于结束时间")
					return
				}
				this.getAllDaySalary()
				this.beginDayShow = false
			},
			endDayCancel() {
				this.endDayShow = false
			},
			async endDayConfirm(e) {
				this.endDay = await moment(e.value).format('yyyy-MM-DD')
				if (this.endDay < this.beginDay) {
					this.$modal.msg("请选择大于开始时间")
					return
				}
				this.getAllDaySalary()
				this.endDayShow = false
			},
			beginMonthCancel() {
				this.beginMonthShow = false
			},
			async beginMonthConfirm(e) {
				this.beginMonth = await moment(e.value).format('yyyy-MM')
				if (this.endMonth < this.beginMonth) {
					this.$modal.msg("请选择小于结束时间")
					return
				}
				this.getAllMonSalary()
				this.beginMonthShow = false
			},
			endMonthCancel() {
				this.endMonthShow = false
			},
			async endMonthConfirm(e) {
				this.endMonth = await moment(e.value).format('yyyy-MM')
				if (this.endMonth < this.beginMonth) {
					this.$modal.msg("请选择大于开始时间")
					return
				}
				this.getAllMonSalary()
				this.endMonthShow = false
			},
			/**
			 * 员工筛选列表
			 */
			getEmpolyees() {
				let comId = this.$store.getters.companyId;
				let query = {
					userType: "2",
					companyId: comId,
				};
				getCusList(query).then((res) => {
					this.empList.push(res.rows)
					this.empList[0].unshift({
						userId: null,
						nickName: '全部员工'
					})
				});
			},
			empConfirm(e) {
				this.queryParams.nickName = e.value[0].nickName
				this.queryParams.userId = e.value[0].userId
				if (this.current == 0) {
					this.getAllDaySalary()
				} else {
					this.getAllMonSalary()
				}
				this.empShow = false
			},

		}
	}
</script>

<style>
	page {
		height: 101%;
	}
</style>

<style lang="scss" scoped>
	/deep/ .u-tabs {
		background-color: #fff;
	}

	.cardNumber {
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}

	.topInfo {
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 48rpx auto 0rpx auto;
	}

	.middleInfo {
		margin: 0rpx auto;
	}

	.downInfo {
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}

	.conUp {
		width: 92%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: radial-gradient(circle at 448rpx 50rpx, transparent 0%, transparent 8px, #fff 8px, #fff 100%);
		background-position: 244rpx -16rpx;
		margin: 0rpx auto;
	}

	.splitArea {
		border: none;
		border-top: 3rpx dashed #d8d8d8;
		width: 85%;
	}

	.search {
		background-color: #fff;
		height: 100rpx;
	}

	.baseBack {
		width: 92%;
		background-color: #fff;
	}

	.price {
		color: #AC58FA;
		font-size: 50rpx;
	}

	.pp {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: grey;
		margin: 0rpx 30rpx 0rpx 50rpx;
	}

	.pv {
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
</style>